import React, { useRef } from 'react'

export default function Search({setSearchName}) {

  const inputRef = useRef()

  const handleClick = () => {
    // 得输入的关键字
    const searchName = inputRef.current.value
    // 如果有值, 调用setSearchName传递给父组件
    if (searchName) {
      setSearchName(searchName)
    }
  }


  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input ref={inputRef} type="text" placeholder="enter the name you search"/>
        <button onClick={handleClick}>Search</button>
      </div>
    </section>
  )
}
